import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Link } from 'react-router';
import {  Icon,Tabs,message,Row, Col,Input,DatePicker,Button,Table,Form,Select,Cascader,Upload,Spin,Modal} from 'antd';
import NavBar from '../common/NavBar';
import ContentBody from '../common/ContentBody';
import api from '../api';
import moment from 'moment';


const TabPane = Tabs.TabPane;
const FormItem = Form.Item;
const Option = Select.Option;
import {
  COMPANY_NATRUE
} from '../constants/index';

const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 4 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 20 },
  },
};


class FinanceCompanyDetail extends React.Component {
    constructor(props, context){
        super(props, context);
        var {loan_id,operate_type} = props.location.query||{};
        this.state={
          loading:false,
          company:{},
          previewImage:"",
          previewVisible:false,
        };
    }
    componentWillMount(){
      let {id} = this.props.location.query||{};
      this.doFetch(id);
    }

    componentWillReceiveProps(nextProps){

    }

    

    async doFetch(id){
      let {previewImage} = this.state;
      this.setState({
        loading:true,
      })
      let result = await api('/system/financeCompany/detail',{id:id});
      if (result.success) {
        if (result.data && result.data.license && result.data.license.length != 0) {
          previewImage = result.data.license[0].previewUrl;
        }
        this.setState({
          company:result.data,
          previewImage,
        })
      }else{
        message.error(result.message);
      }
      this.setState({
        loading:false,
      })

        
    }
    uuid(){
      return Math.random().toString(32).slice(2)
    }

    handleCancel(){
      this.setState({
        previewVisible:false,
      })
    }

    handlePreview(){
      this.setState({
        previewVisible:true,
      })
    }



    render() {
        var {company,previewImage,previewVisible} = this.state;
       return (
        <Spin spinning={this.state.loading}>
          <div className="containerWithBorder margin20 bgWhite">
            <div className="padding15 containerWithBottomBorder" style={{backgroundColor:"#EFEFEF"}}>
              <Button
                type="primary"
                className="marginR15"
                onClick={() =>{
                  this.context.router.push('/systemManage/financeCompany/list');
                }}
              >返回</Button>
              
              <span
              >{company.name}</span>
            </div>
            <h2 className="type-title margin15">基本信息</h2>
              <Row className="containerWithTopBorder">
                <Col 
                  span={3}
                  style={{backgroundColor:"#EFEFEF",paddingLeft:"15px"}}
                  className="containerWithRightBorder padding15"
                >
                  公司名称
                </Col>
                <Col 
                  span={7}
                  style={{paddingLeft:"15px"}}
                  className="padding15"
                >
                  {company.name}
                </Col>

                <Col 
                  span={3}
                  style={{backgroundColor:"#EFEFEF",paddingLeft:"15px"}}
                  className="containerWithRightAndLeftBorder padding15"
                >
                  注册省份
                </Col>
                <Col 
                  span={7}
                  style={{paddingLeft:"15px"}}
                  className="padding15"
                >
                  {company.province_name}{company.city_name}{company.area_name}
                </Col>


              </Row>
              <Row className="containerWithTopBorder">
                <Col 
                  span={3}
                  style={{backgroundColor:"#EFEFEF",paddingLeft:"15px"}}
                  className="containerWithRightBorder padding15"
                >
                  详细地址
                </Col>
                <Col 
                  span={7}
                  style={{paddingLeft:"15px"}}
                  className="padding15"
                >
                  {company.address}
                </Col>

                <Col 
                  span={3}
                  style={{backgroundColor:"#EFEFEF",paddingLeft:"15px"}}
                  className="containerWithRightAndLeftBorder padding15"
                >
                  所属行业
                </Col>
                <Col 
                  span={7}
                  style={{paddingLeft:"15px"}}
                  className="padding15"
                >
                  {company.industry}
                </Col>


              </Row>
              <Row className="containerWithTopBorder">
                <Col 
                  span={3}
                  style={{backgroundColor:"#EFEFEF",paddingLeft:"15px"}}
                  className="containerWithRightBorder padding15"
                >
                  企业性质
                </Col>
                <Col 
                  span={7}
                  style={{paddingLeft:"15px"}}
                  className="padding15"
                >
                  {COMPANY_NATRUE[company.nature]}
                </Col>
                <Col 
                  span={3}
                  style={{backgroundColor:"#EFEFEF",paddingLeft:"15px"}}
                  className="containerWithRightAndLeftBorder padding15"
                >
                  法人代表
                </Col>
                <Col 
                  span={7}
                  style={{paddingLeft:"15px"}}
                  className="padding15"
                >
                  {company.representative}
                </Col>
                


              </Row>
              <Row className="containerWithTopBorder">
                <Col 
                  span={3}
                  style={{backgroundColor:"#EFEFEF",paddingLeft:"15px",paddingBottom:"140px"}}
                  className="containerWithRightBorder padding15"
                >
                  营业执照
                </Col>
                <Col 
                  span={7}
                  style={{paddingLeft:"15px"}}
                  className="padding15"
                >
                  {
                    previewImage ? 

                    <div className="clearfix">
                      <img 
                        src={previewImage}
                        onClick={this.handlePreview.bind(this)}
                        style={{width:100,height:100}}
                        >
                      </img>
                      <Modal visible={previewVisible} footer={null} onCancel={this.handleCancel.bind(this)}>
                          <img alt="example" style={{ width: '100%' }} src={previewImage} />
                      </Modal>
                    
                    </div>
                    :null
                  }
                </Col>
              </Row>

          </div>
          </Spin>


          
            
        )
    }
}
FinanceCompanyDetail.contextTypes= { router: React.PropTypes.object.isRequired};

export default  Form.create()(FinanceCompanyDetail);
